<!-- eslint-disable max-len -->
<template>
  <el-row :gutter="20">
    <el-col :span="3"></el-col>
    <el-col :span="15">
      <div class="mt-4">
        <el-input placeholder="请输入用户名" v-model.lazy="Search" class="input-with-select"></el-input>
      </div>
    </el-col>
    <el-col :span="3">
      <el-button type="primary">点击搜索用户名</el-button>
    </el-col>
    <el-col :span="3"></el-col>
  </el-row>

  <el-table border :data="newUserList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
    style="width: 100%; margin-top: 50px;">
    <el-table-column label="评论ID" prop="id" width="120" align="center" />
    <el-table-column label="用户名" prop="username" width="180" align="center" />
    <el-table-column label="电影名" prop="movietitle" width="180" align="center" />
    <el-table-column label="评论时间" prop="commenttime" width="220" align="center" />
    <el-table-column label="用户评分" prop="score" width="100" align="center" />
    <el-table-column label="评论内容" prop="content" width="480" align="center" />
    <el-table-column label="操作" width="180" align="center">

      <template #default="scope">
        <el-button type="primary" @click="showtable(scope.row)">编辑</el-button>
        <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
      </template>

    </el-table-column>
  </el-table>
  <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 2, 15, 20]"
    :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
    :total="newUserList.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

  <Dialog @get-list="getList"></Dialog>
</template>

<script setup lang="ts">
import { ElMessageBox, ElMessage } from 'element-plus';
import { computed, onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import Dialog from '../components/CommentDialog.vue';
import http from '../util/api';

const store = useStore();

const Search = ref('');

// 当前页数
const currentPage = ref(1);
// 每页显示条数
const pageSize = ref(5);

const small = ref(false);
const background = ref(false);
const disabled = ref(false);

// page-size改变时触发
const handleSizeChange = (val: number) => {
  pageSize.value = val;
};
// current-page改变时触发
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
};

const showtable = (vel: any) => {
  store.commit('changeDialog', vel);
  store.commit('showEdit', vel);
};

// 接收表格数据
const userList = ref([]);

onMounted(() => {
  // eslint-disable-next-line no-use-before-define
  getList();
});

const newUserList = computed(() => {
  console.log(userList.value, 111);
  // eslint-disable-next-line max-len
  return userList.value.filter((item: any) => item.username.toLowerCase().includes(Search.value.toLowerCase()));
});

const getList = () => {
  http('/userComment').then((res: any) => {
    userList.value = res.data;
  });
};

// 删除信息
const handleDelete = (row: any) => {
  ElMessageBox.confirm(
    '确认删除该信息吗?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      http(`/userComment/${row.id}`, 'delete').then((res: any) => {
        // console.log(res);

        if (res.status === 200) {
          console.log('进来');
          ElMessage({
            type: 'success',
            message: '删除成功！',
          });
          getList();
        } else {
          ElMessage({
            type: 'error',
            message: '删除失败！',
          });
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消！',
      });
    });
};
// eslint-disable-next-line no-redeclare
// function ElMessage(arg0: { type: string; message: string; }) {
//   throw new Error('Function not implemented.');
// }
</script>

<style scoped>
.input-with-select {
  background-color: var(--el-fill-color-blank);
}
</style>
